import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Input, message, Popconfirm, Popover, Row, Select, Table, Tabs} from 'antd';
import RightBox from '../common/rightBox';
import RightConstants from '../../utils/RightConstants';
import OrderChargeInfo from './orderChargeInfo';
import PaymentDetail from '../finance/paymentDetail';
import Constants from '../../utils/Constants';
import {download} from '../../utils/commons';
import AddChargeTemplate from '../quotationSupport/chargeTemplate/addChargeTemplate';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const R = require("ramda");

const orderCostInfo = Form.create()(class OrderCostInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            applyId: undefined, //当前开票申请的id
            applyValue: undefined,

            addMemo: undefined, //变更新增备注
            openAdd: false, //变更新增气泡框
            addType: undefined, //变更新增类型

            addApprovalMemo: undefined, //变更新增审核备注
            openAddApproval: false, //变更新增审核气泡框
            addApprovalType: false,//变更新增审核类型

            //单条的变更申请
            updateId: undefined,        //当前变更申请的id
            updateMemo: undefined,      //当前变更申请的备注
            updateType: undefined,       //当前变更申请的费用类型

            //单条的变更审核
            updateApprovalId: undefined,        //当前变更申请审核的id
            updateApprovalMemo: undefined,      //当前变更申请审核的备注
            updateApprovalType: undefined,       //当前变更申请审核的费用类型

            //visible: false,         
            setpTwoDisable: true,
            recRowSelectKeys: [],
            copeRowSelectKeys: [],

            recRowSelectRows: [],
            copeRowSelectRows: [],

            payload: {
                recIds: [],
                copewithIds: []
            }
        };
    }


    componentDidMount() {
        let odPayChargeList = R.isNil(this.props.order.odChargeMap.odPayChargeList) ? null : this.props.order.odChargeMap.odPayChargeList;
        let odReceiptChargeList = R.isNil(this.props.order.odChargeMap.odReceiptChargeList) ? null : this.props.order.odChargeMap.odReceiptChargeList;
        let odChargeBOList = odPayChargeList && odReceiptChargeList ? odPayChargeList.concat(odReceiptChargeList) : (odPayChargeList ? odPayChargeList : odReceiptChargeList);
        this.props.dispatch({
            type: 'orderCharge/totalMoney',
            payload: {
                receiptId: this.props.receiptId,
                odChargeBOList
            }
        });
    }

    handleAddFee = (id, feeType, addStatus) => {                   //新增、修改费用
        if (id) {
            this.props.dispatch({
                type: 'orderCharge/getOdChargeById',
                payload: { id }
            })
        }
        this.props.dispatch({ type: 'feeItem/getAllFeeItems' });    //查本地费
        this.props.dispatch({ type: 'supplier/getSupplierList' });  //查询供应商
        this.props.dispatch({ type: 'company/getCompanyList' });    //查询客户
        this.orderChargeInfo.handleOpen(id, feeType, addStatus, false, false,false);
    }

    handleAddTemplate = (id, feeType, addStatus,template) => {                   //template T  F
        if (id) {
            this.props.dispatch({
                type: 'orderCharge/getOdChargeById',
                payload: { id }
            })
        }
        this.props.dispatch({ type: 'chargeTemplate/queryAll', payload: { type:feeType } });
        this.addChargeTemplate.handleOpen(id, feeType, addStatus,template, false,);
    }

    handlePayApply = () => {
        if (R.isEmpty(this.state.payload.copewithIds)) {
            message.error("请选择费用付款！");
            return;
        } else {
            let dataSource = this.props.order.dataSource ? this.props.order.dataSource : {};
            let order = dataSource.order ? dataSource.order : {};
            let company = dataSource.company ? dataSource.company : {};
            let receiver = [];
            let currency = undefined;
            let flag = true;
            let selectedRows = [...this.state.copeRowSelectRows ? this.state.copeRowSelectRows : []];
            selectedRows.map(item => {
                if (item.status !== '2') {
                    flag = false;
                    message.error("业务未确认的费用不允许申请付款");
                }
                if (item.balance === 0) {
                    flag = false;
                    message.error("未付款余额为0的费用不允许申请付款");
                }
                if (receiver.length === 0) {
                    receiver[0] = item.settlementUnit
                } else {
                    if (item.settlementUnit !== receiver[0]) {
                        flag = false;
                        message.error("结算单位不一致，不允许同时申请付款");
                    }
                }
                if (!currency) {
                    currency = item.currency
                } else {
                    if (item.currency !== currency) {
                        flag = false;
                        message.error("币种不一致，不允许同时申请付款");
                    }
                }
                item.orderNo = order.orderno;
                item.cstName = company.companyName;
                item.verificateAmout = item.balance;
            })

            if (flag) {
                this.props.dispatch({
                    type: 'payment/getPaymentById',
                    payload: {}
                });
                this.paymentDetail.handleOpen({ disabled: false, paymentList: this.state.copeRowSelectRows, receiver: receiver[0], batchFlag: false });
            }
        }
        this.setSetpTwoDisable(false);
    }

    isConfirmCharge = flag => {
        if (flag == "confirm") {
            this.props.dispatch({
                type: 'order/confirmCharge',
                payload: {
                    id: this.props.orderId,
                    onSuccess: () => {
                        if (this.props.fetchDetail) this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                    }
                }
            });
        } else if (flag == "noConfirm") {
            this.props.dispatch({
                type: 'order/cancelChargeConfirm',
                payload: {
                    id: this.props.orderId,
                    onSuccess: () => {
                        if (this.props.fetchDetail) this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                    }
                }
            });
        }
    }

    onCalculation = (id, feeType, list, isDelete) => {
        let odReceiptChargeList = R.isNil(this.props.order.odChargeMap.odReceiptChargeList) ? null : this.props.order.odChargeMap.odReceiptChargeList;
        let odPayChargeList = R.isNil(this.props.order.odChargeMap.odPayChargeList) ? null : this.props.order.odChargeMap.odPayChargeList;
        if (feeType == "1") {    //应收
            if (isDelete) {
                for (let i = 0; i < odReceiptChargeList.length; i++) {
                    if (R.equals(odReceiptChargeList[i].id, id)) {
                        odReceiptChargeList.splice(i, 1);
                        break;
                    }
                }
            } else {
                if (list.id) {
                    R.map((row) => {
                        if (row.id === list.id) {
                            row.feeItemId = list.feeItemId;
                            row.currency = list.currency;
                            row.fee = list.fee;
                            row.count = list.count;
                            row.quotePrice = list.quotePrice;
                            row.rate = list.rate;
                            row.quotePriceCny = list.quotePriceCny;
                            row.settlementUnit = list.settlementUnit;
                        }
                    }, odReceiptChargeList)
                } else {
                    odReceiptChargeList = list ? odReceiptChargeList.concat(list) : odReceiptChargeList;
                }
            }
        }

        if (feeType == "0") {    //应付
            if (isDelete) {
                for (let i = 0; i < odPayChargeList.length; i++) {
                    if (R.equals(odPayChargeList[i].id, id)) {
                        odPayChargeList.splice(i, 1);
                        break;
                    }
                }
            } else {
                if (list.id) {
                    R.map((row) => {
                        if (row.id === list.id) {
                            row.feeItemId = list.feeItemId;
                            row.currency = list.currency;
                            row.fee = list.fee;
                            row.count = list.count;
                            row.quotePrice = list.quotePrice;
                            row.rate = list.rate;
                            row.quotePriceCny = list.quotePriceCny;
                            row.settlementUnit = list.settlementUnit;
                        }
                    }, odPayChargeList)
                } else {
                    odPayChargeList = list ? odPayChargeList.concat(list) : odPayChargeList;
                }
            }
        }

        let odChargeBOList = odPayChargeList && odReceiptChargeList ? odPayChargeList.concat(odReceiptChargeList) : (odPayChargeList ? odPayChargeList : odReceiptChargeList);
        this.props.dispatch({
            type: 'orderCharge/totalMoney',
            payload: {
                receiptId: this.props.receiptId,
                odChargeBOList
            }
        });
    }

    handleGeneratingBill = (settlementUnit) => {
        if (R.isNil(settlementUnit)) {
            message.error("请选择结算单位！");
            return;
        }

        // if (R.isEmpty(this.state.payload.recIds)) {
        //     message.error("请选择费用！");
        //     return;
        // } else {
        let orderId = this.props.orderId;
        let url = apiPath.mc + "/api/file/export/accountreceivable/" + orderId;
        let conditions = {};
        conditions.settlementUnit = settlementUnit;
        download(url, conditions);
        // }
        // this.setSetpTwoDisable(false);
    }

    handleVisibleChange = (applyId, applyValue) => {
        this.setState({ applyId, applyValue });
    }

    handleCancelApply = () => {
        this.setState({ applyId: undefined, applyValue: undefined });
    }

    changeApplyValue = (e) => {
        this.setState({ applyValue: e.target.value })
    }

    handleConfirmApply = () => { //确认开票申请
        if (this.state.applyValue)
            this.props.dispatch({
                type: 'orderCharge/updateOdCharge',
                payload: {
                    id: this.state.applyId,
                    invoiceTitle: this.state.applyValue,
                    onSuccess: () => {
                        this.handleSearch();
                        this.handleCancelApply();
                    }
                }
            })
        else this.handleCancelApply();
    }

    handleDelete = (id, feeType) => {
        this.props.dispatch({
            type: 'orderCharge/deleteOdChargeById',
            payload: {
                id,
                onSuccess: () => {
                    this.handleSearch();
                    this.onCalculation(id, feeType, null, true);
                    if(this.props.fetchDetail)this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                }
            }
        })
    }

    setSetpTwoDisable = (value) => {
        this.setState({ setpTwoDisable: value });
    }

    setPayload = (payload) => {
        if (R.isNil(payload)) {
            payload = {
                recIds: [],
                copewithIds: []
            }
            this.state.payload = payload;

        } else {
            if (!R.isNil(payload.recIds)) {
                this.state.payload.recIds = payload.recIds;
            }
            if (!R.isNil(payload.copewithIds)) {
                this.state.payload.copewithIds = payload.copewithIds;
            }
        }
    }

    setIdarray = (selectedRows, type) => {
        let ids = [];
        for (let i = 0; i < selectedRows.length; i++) {
            ids.push(selectedRows[i].id);
        }

        let payload = {};
        if (R.isNil(type)) {
            return;
        } else if (type == "receivable") {
            payload.recIds = ids;
        } else if (type == "copewith") {
            payload.copewithIds = ids;
        }
        this.setPayload(payload);
    }

    handleSearch = flag => {
        this.props.dispatch({
            type: 'order/getById',
            payload: {
                receiptId: this.props.receiptId
            }
        });
    };

    form = {};
    flag = true;
    handleCollectForm = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) {
                this.flag = false;
                return;
            } else {
                this.flag = true;
                this.form = { ...values };
            }
        })
        return this.flag;
    }

    checkOrderCostInfo = () => {
        if (this.handleCollectForm()) {
            return this.form;
        }
    }

    openAdd = (addType) => {
        this.setState({ openAdd: true, addType, addMemo: undefined });
    }

    closeAdd = () => {
        this.setState({ openAdd: false, addType: undefined, addMemo: undefined });
    }

    changeAddMemo = (e) => {
        this.setState({ addMemo: e.target.value })
    }

    confirmAdd = () => {
        if (!this.state.addMemo) {
            message.error("变更新增原因不能为空！"); return;
        }
        this.props.dispatch({
            type: 'approvalHistory/createApprovalHistory',
            payload: {
                entityId: this.props.orderId,
                applyMemo: this.state.addMemo,
                businessType: this.state.addType === "0" ? Constants.BUSINESSTYPE.CHARGE_ADD_PAY : Constants.BUSINESSTYPE.CHARGE_ADD_CLAIM,
                onSuccess: () => {
                    this.closeAdd();
                    if (this.props.fetchDetail) this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                }
            }
        })
    }

    changeAddApprovalMemo = (e) => {
        this.setState({ addApprovalMemo: e.target.value })
    }

    openAddApproval = (addApprovalType) => {
        this.setState({ openAddApproval: true, addApprovalType, addApprovalMemo: undefined });
    }

    closeAddApproval = () => {
        this.setState({ openAddApproval: false, addApprovalType: undefined, addApprovalMemo: undefined });
    }

    confirmAddApproval = (result) => {
        if (!this.state.addApprovalMemo && result === '0') {
            message.error("审核结果为拒绝时，备注不能为空！"); return;
        }
        this.props.dispatch({
            type: 'order/chargeAddApproval',
            payload: {
                id: this.props.orderId,
                result,
                memo: this.state.addApprovalMemo,
                businessType: this.state.addApprovalType === "0" ? Constants.BUSINESSTYPE.CHARGE_ADD_PAY : Constants.BUSINESSTYPE.CHARGE_ADD_CLAIM,
                onSuccess: () => {
                    this.closeAddApproval();
                    if (this.props.fetchDetail) this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                }
            }
        })
    }

    changeUpdateMemo = (e) => {
        this.setState({ updateMemo: e.target.value })
    }

    openUpdate = (updateId, updateType) => {
        this.setState({ updateId, updateType, updateMemo: undefined });
    }

    closeUpdate = () => {
        this.setState({ updateId: undefined, updateType: undefined, updateMemo: undefined });
    }

    confirmUpdate = () => {
        if (!this.state.updateMemo) {
            message.error("变更原因不能为空"); return;
        }
        this.props.dispatch({
            type: 'approvalHistory/createApprovalHistory',
            payload: {
                entityId: this.state.updateId,
                applyMemo: this.state.updateMemo,
                businessType: this.state.updateType === '0' ? Constants.BUSINESSTYPE.CHARGE_UPDATE_PAY : Constants.BUSINESSTYPE.CHARGE_UPDATE_CLAIM,
                onSuccess: () => {
                    this.closeUpdate();
                    if (this.props.fetchDetail) this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                }
            }
        })
    }

    changeUpdateApprovalMemo = (e) => {
        this.setState({ updateApprovalMemo: e.target.value })
    }

    openUpdateApproval = (updateApprovalId, updateApprovalType) => {
        this.setState({ updateApprovalId, updateApprovalType, updateApprovalMemo: undefined });
    }

    closeUpdateApproval = () => {
        this.setState({ updateApprovalId: undefined, updateApprovalType: undefined, updateApprovalMemo: undefined });
    }

    confirmUpdateApproval = (result) => {
        if (!this.state.updateApprovalMemo && result === '0') {
            message.error("审核结果为拒绝时，备注不能为空！"); return;
        }
        this.props.dispatch({
            type: 'orderCharge/approval',
            payload: {
                id: this.state.updateApprovalId,
                result,
                memo: this.state.updateApprovalMemo,
                businessType: this.state.updateApprovalType === '0' ? Constants.BUSINESSTYPE.CHARGE_UPDATE_PAY : Constants.BUSINESSTYPE.CHARGE_UPDATE_CLAIM,
                onSuccess: () => {
                    this.closeUpdateApproval();
                    if (this.props.fetchDetail) this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                }
            }
        })
    }

    addChargeSumit = (chargeType) => {
        this.props.dispatch({
            type: 'order/addChargeSumit',
            payload: {
                id: this.props.orderId,
                chargeType,
                onSuccess: () => {
                    if (this.props.fetchDetail) this.props.fetchDetail(this.props.receiptId, this.props.orderId);
                }
            }
        })
    }

    getReceivableColumns = () => {
        let columns = [
            { title: '费用项目', dataIndex: 'feeItemName', key: 'feeItemName' },
            { title: '币种', dataIndex: 'currency', key: 'currency' },
            { title: '单价', dataIndex: 'fee', key: 'fee' },
            { title: '数量', dataIndex: 'count', key: 'count' },
            { title: '合计', dataIndex: 'quotePrice', key: 'quotePrice' },
            { title: '汇率', dataIndex: 'rate', key: 'rate' },
            { title: '人民币合计', dataIndex: 'quotePriceCny', key: 'quotePriceCny' },
            { title: '待认领余额', dataIndex: 'balance', key: 'balance' },
            {
                title: '费用状态',
                render(record) {
                    if (record.status == "1") {
                        return '草稿';
                    } else if (record.status == "2") {
                        return '业务已确认';
                    } else if (record.status == "3") {
                        return '变更申请中';
                    } else if (record.status == "4") {
                        return '变更已审核';
                    } else if (record.status == "5") {
                        return '变更新增';
                    } else if (record.status == "6") {
                        return '业务确认中';
                    }
                }
            },
            { title: '开票抬头', dataIndex: 'invoiceTitle', key: 'invoiceTitle' },
        ];
        if (this.props.businessApproval) {
            columns.push({ title: '结算单位', dataIndex: 'settlementUnit', key: 'settlementUnit' },
                {
                    title: '操作',
                    render: (record) => {

                        let dataSource = this.props.order.dataSource ? this.props.order.dataSource : {};
                        let order = dataSource.order ? dataSource.order : {};
                        let editLink = <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_EDIT} split={true}><a href="#" onClick={this.handleAddFee.bind(this, record.id, "1", order.claimAddStatus === '2')}>编辑</a></RightBox>
                        let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record.id, "1")} okText="是" cancelText="否"
                            placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                            <a href="#">删除</a>
                        </Popconfirm>
                        deleteLink = <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_DELETE}>{deleteLink}</RightBox>

                        return <span>
                            <span>
                                {record.status == "1" || record.status === '5' || record.status === '4' ? editLink : null}
                            </span>
                            <span> {record.invoiceTitle ? null : <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_INVOICE} split={true}>
                                <Popover key={record.id} content={<div><div><Input disabled={false} maxLength="100" value={this.state.applyValue === undefined ? record.settlementUnit : this.state.applyValue} onChange={this.changeApplyValue.bind(this)} /></div>
                                    <div style={{ marginTop: 3 }}>
                                        <span style={{ float: 'right' }}><Button onClick={this.handleCancelApply.bind(this, false)}>取消</Button></span>
                                        <span style={{ marginLeft: 30 }}><Button onClick={this.handleConfirmApply.bind(this, record.id)}>确认</Button></span>
                                    </div></div>
                                }
                                    title={<span style={{ color: 'red' }}>只能更新一次</span>} trigger="click" visible={this.state.applyId === record.id} onVisibleChange={this.handleVisibleChange.bind(this, record.id, record.settlementUnit)}><a href="#">开票</a>
                                </Popover>
                            </RightBox>}
                            </span>
                            <span>{record.status === '2' ? <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_FEECHANGE}>
                                <Popover key={record.id} content={<div><div><Input disabled={false} maxLength="100" value={this.state.updateMemo} onChange={this.changeUpdateMemo.bind(this)} /></div>
                                    <div style={{ marginTop: 3 }}>
                                        <span style={{ float: 'right' }}><Button onClick={this.closeUpdate.bind(this)}>取消</Button></span>
                                        <span style={{ marginLeft: 30 }}><Button onClick={this.confirmUpdate.bind(this, record.id)}>确认</Button></span>
                                    </div></div>
                                }
                                    title='请填写变更原因' trigger="click" visible={this.state.updateId === record.id} onVisibleChange={this.openUpdate.bind(this, record.id, record.type)}><a href="#">变更</a>
                                </Popover>
                            </RightBox> : null}
                            </span>
                            <span>{record.status === '3' ? <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_FEEAPPROVAL} split={true}>
                                <Popover key={record.id} content={<div><div><Input disabled={false} maxLength="100" value={this.state.updateApprovalMemo} onChange={this.changeUpdateApprovalMemo.bind(this)} /></div>
                                    <div style={{ marginTop: 3 }}>
                                        <span style={{ float: 'right' }}><Button onClick={this.closeUpdateApproval.bind(this)}>取消</Button></span>
                                        <span style={{ float: 'right' }}><Button onClick={this.confirmUpdateApproval.bind(this, "0")}>拒绝</Button></span>
                                        <span style={{ marginLeft: 30 }}><Button onClick={this.confirmUpdateApproval.bind(this, "1")}>同意</Button></span>
                                    </div></div>
                                }
                                    title='请填写审核备注' trigger="click" visible={this.state.updateApprovalId === record.id} onVisibleChange={this.openUpdateApproval.bind(this, record.id, record.type)}><a href="#">变更审核</a>
                                </Popover>
                            </RightBox> : null}
                            </span>
                            <span>{['1', '4', '5'].includes(record.status) ? deleteLink : null}</span>
                        </span>
                    }
                })
        }
        return columns;
    }

    getCopeWithColumns = () => {
        let columns = [
            { title: '费用项目', dataIndex: 'feeItemName', key: 'feeItemName' },
            { title: '币种', dataIndex: 'currency', key: 'currency' },
            { title: '单价', dataIndex: 'fee', key: 'fee' },
            { title: '数量', dataIndex: 'count', key: 'count' },
            { title: '合计', dataIndex: 'quotePrice', key: 'quotePrice' },
            { title: '汇率', dataIndex: 'rate', key: 'rate' },
            { title: '人民币合计', dataIndex: 'quotePriceCny', key: 'quotePriceCny' },
            { title: '未付款余额', dataIndex: 'balance', key: 'balance' },
            {
                title: '费用状态',
                render(record) {
                    if (record.status == "1") {
                        return '草稿';
                    } else if (record.status == "2") {
                        return '业务已确认';
                    } else if (record.status == "3") {
                        return '变更申请中';
                    } else if (record.status == "4") {
                        return '变更已审核';
                    } else if (record.status == "5") {
                        return '变更新增';
                    } else if (record.status == "6") {
                        return '业务确认中';
                    }
                }
            }
        ];
        if (this.props.businessApproval) {
            columns.push({ title: '结算单位', dataIndex: 'settlementUnit', key: 'settlementUnit' },
                {
                    title: '操作',
                    render: (record) => {
                        let dataSource = this.props.order.dataSource ? this.props.order.dataSource : {};
                        let order = dataSource.order ? dataSource.order : {};
                        let editLink = <RightBox resource={RightConstants.ORDER.ORDER_COST_COPEWITH_EDIT} split={true}><a href="#" onClick={this.handleAddFee.bind(this, record.id, "0", order.payAddStatus === '2')}>编辑</a></RightBox>
                        let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record.id, "0")} okText="是" cancelText="否"
                            placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                            <a href="#">删除</a>
                        </Popconfirm>
                        deleteLink = <RightBox resource={RightConstants.ORDER.ORDER_COST_COPEWITH_DELETE}>{deleteLink}</RightBox>
                        let updateApply = <span>{record.status === '2' ? <RightBox resource={RightConstants.ORDER.ORDER_COST_COPEWITH_FEECHANGE}>
                            <Popover key={record.id} content={<div><div><Input disabled={false} maxLength="100" value={this.state.updateMemo} onChange={this.changeUpdateMemo.bind(this)} /></div>
                                <div style={{ marginTop: 3 }}>
                                    <span style={{ float: 'right' }}><Button onClick={this.closeUpdate.bind(this)}>取消</Button></span>
                                    <span style={{ marginLeft: 30 }}><Button onClick={this.confirmUpdate.bind(this, record.id)}>确认</Button></span>
                                </div></div>
                            }
                                title='请填写变更原因' trigger="click" visible={this.state.updateId === record.id} onVisibleChange={this.openUpdate.bind(this, record.id, record.type)}><a href="#">变更</a>
                            </Popover>
                        </RightBox> : null}
                        </span>
                        let updateApproval = <span>{record.status === '3' ? <RightBox resource={RightConstants.ORDER.ORDER_COST_COPEWITH_FEEAPPROVAL} split={true}>
                            <Popover key={record.id} content={<div><div><Input disabled={false} maxLength="100" value={this.state.updateApprovalMemo} onChange={this.changeUpdateApprovalMemo.bind(this)} /></div>
                                <div style={{ marginTop: 3 }}>
                                    <span style={{ float: 'right' }}><Button onClick={this.closeUpdateApproval.bind(this)}>取消</Button></span>
                                    <span style={{ float: 'right' }}><Button onClick={this.confirmUpdateApproval.bind(this, "0")}>拒绝</Button></span>
                                    <span style={{ marginLeft: 30 }}><Button onClick={this.confirmUpdateApproval.bind(this, "1")}>同意</Button></span>
                                </div></div>
                            }
                                title='请填写审核备注' trigger="click" visible={this.state.updateApprovalId === record.id} onVisibleChange={this.openUpdateApproval.bind(this, record.id, record.type)}><a href="#">变更审核</a>
                            </Popover>
                        </RightBox> : null}
                        </span>
                        return <span>{record.status == "1" || record.status === '5' || record.status === '4' ? editLink : null}{['1', '4', '5'].includes(record.status) ? deleteLink : null}{updateApply}{updateApproval}</span>
                    }
                })
        }
        return columns;
    }

    chargeConfirmColumns = [
        { title: '申请人', dataIndex: 'creatorName', key: 'creatorName' },
        { title: '申请原因', dataIndex: 'applyMemo', key: 'applyMemo' },
        { title: '申请时间', dataIndex: 'createtime', key: 'createtime' },
        { title: '审批人', dataIndex: 'updaterName', key: 'updaterName' },
        { title: '审批时间', dataIndex: 'updatetime', key: 'updatetime' },
        { title: '审批意见', dataIndex: 'approvalMemo', key: 'approvalMemo' },
        {
            title: '审批结论',
            render(record) {
                if (record.result == "0") {
                    return '审核失败';
                } else if (record.result == "1") {
                    return '审核通过';
                } else if (record.result == "2") {
                    return '授权取消';
                } else if (record.result == "3") {
                    return '授权超时';
                }
            }
        }
    ];

    chargeAddColumns = [
        {
            title: '费用类型', key: 'chargeType', render(record) {
                return record.businessType === Constants.BUSINESSTYPE.CHARGE_ADD_CLAIM ? "应收" : "应付"
            }
        },
        { title: '申请人', dataIndex: 'creatorName', key: 'creatorName' },
        { title: '申请原因', dataIndex: 'applyMemo', key: 'applyMemo' },
        { title: '申请时间', dataIndex: 'createtime', key: 'createtime' },
        { title: '审批人', dataIndex: 'updaterName', key: 'updaterName' },
        { title: '审批时间', dataIndex: 'updatetime', key: 'updatetime' },
        { title: '审批意见', dataIndex: 'approvalMemo', key: 'approvalMemo' },
        {
            title: '审批结论',
            render(record) {
                if (record.result == "0") {
                    return '审核失败';
                } else if (record.result == "1") {
                    return '审核通过';
                } else if (record.result == "2") {
                    return '授权取消';
                } else if (record.result == "3") {
                    return '授权超时';
                }
            }
        }
    ];

    chargeUpdateColumns = [
        { title: '费用名称', dataIndex: 'name', key: 'name' },
        {
            title: '费用类型', key: 'chargeType', render(record) {
                return record.type === '1' ? "应收" : "应付"
            }
        },
        { title: '币种', dataIndex: 'currency', key: 'currency' },
        { title: '更改前', dataIndex: 'oriValue', key: 'oriValue' },
        { title: '更改后', dataIndex: 'fixValue', key: 'fixValue' },
        {
            title: '利润差额', key: 'banlance', render(record) {
                if (isNaN(record.fixValue) || isNaN(record.oriValue)) return 0;
                return Math.round((record.fixValue - record.oriValue) * 100) / 100;
            }
        },
        { title: '申请人', dataIndex: 'creatorName', key: 'creatorName' },
        { title: '变更原因', dataIndex: 'applyMemo', key: 'applyMemo' },
        { title: '审批人', dataIndex: 'updaterName', key: 'updaterName' },
        { title: '审批备注', dataIndex: 'approvalMemo', key: 'approvalMemo' },
        {
            title: '审批结论',
            render(record) {
                if (record.result == "0") {
                    return '审核失败';
                } else if (record.result == "1") {
                    return '审核通过';
                } else if (record.result == "2") {
                    return '授权取消';
                } else if (record.result == "3") {
                    return '授权超时';
                }
            }
        }
    ];

    getPagination = (businessTypes, key) => {
        let _this = this;
        return {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.approvalHistory[key + 'Page'].size,
            current: this.props.approvalHistory[key + 'Page'].page,
            total: this.props.approvalHistory[key + 'Page'].totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = _this.props.approvalHistory[key + 'Page'];
                newPage.size = size;
                newPage.page = 1;
                _this.props.dispatch({ //费用确认审批历史
                    type: key === Constants.BUSINESSTYPE.CHARGE_UPDATE ? 'approvalHistory/getChargeUpdateForPage' : 'approvalHistory/getListForPage',
                    payload: {
                        businessTypes,
                        key,
                        [key === Constants.BUSINESSTYPE.CHARGE_UPDATE ? 'orderId' : 'entityId']: _this.props.orderId,
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = _this.props.approvalHistory[key + 'Page'];
                newPage.page = pageNumber;
                _this.props.dispatch({ //费用确认审批历史
                    type: key === Constants.BUSINESSTYPE.CHARGE_UPDATE ? 'approvalHistory/getChargeUpdateForPage' : 'approvalHistory/getListForPage',
                    payload: {
                        businessTypes,
                        key,
                        [key === Constants.BUSINESSTYPE.CHARGE_UPDATE ? 'orderId' : 'entityId']: _this.props.orderId,
                        page: newPage
                    }
                });
            }
        }
    }

    onCalculationChosen() {
        let [claim, pay] = [{}, {}];
        this.state.recRowSelectRows.map(item =>{
            claim[item.currency] = (claim[item.currency] ? claim[item.currency] : 0) + item.quotePrice;
        })
        this.state.copeRowSelectRows.map(item =>{
            pay[item.currency] = (pay[item.currency] ? pay[item.currency] : 0) + item.quotePrice;
        })
        let [claimTotal, payTotal] = ["", ""];
        for (var key of Object.keys(claim)){
            claimTotal = claimTotal + `${key}: ${claim[key]}; `;
        }
        for (var key of Object.keys(pay)){
            payTotal = payTotal + `${key}: ${pay[key]}; `;
        }
        claimTotal = claimTotal ? "已选合计=> " + claimTotal.substring(0, claimTotal.length -2) : "";
        payTotal = payTotal ? "已选合计=> " + payTotal.substring(0, payTotal.length -2) : "";
        return {claimTotal, payTotal};
    }

    render() {
        let dataSource = this.props.order.dataSource ? this.props.order.dataSource : {};
        let totalFeeData = this.props.orderCharge.feeTotal ? this.props.orderCharge.feeTotal : {};
        let order = dataSource.order ? dataSource.order : {};
        let company = dataSource.company ? dataSource.company : {};
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
        const { getFieldDecorator } = this.props.form;

        const divWithOutBorderBottom = {
            display: 'flex',
            borderRight: '1px solid #5993F4',
            borderLeft: '1px solid #5993F4'
        }

        let receivableRowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({ recRowSelectKeys: selectedRowKeys, recRowSelectRows: selectedRows })
                this.setIdarray(selectedRows, "receivable");
                this.setSetpTwoDisable(true);
            },
            selectedRowKeys: this.state.recRowSelectKeys,
        };

        let copewithRowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({ copeRowSelectKeys: selectedRowKeys, copeRowSelectRows: selectedRows })
                this.setIdarray(selectedRows, "copewith");
                this.setSetpTwoDisable(true);
            },
            selectedRowKeys: this.state.copeRowSelectKeys,
        };


        let flagContent = this.props.order.order.chargeStatus == "2" ? 'noConfirm' : 'confirm';

        let unitList = R.isNil(this.props.order.odChargeMap.odReceiptChargeList) ? null : this.props.order.odChargeMap.odReceiptChargeList;

        //计算已选费用的应收应付合计
        let {claimTotal, payTotal} = this.onCalculationChosen();

        return (
            <Form>
                <Tabs tabPosition={'top'}>
                    <TabPane tab="订单利润合计" key="1">
                        <Row>
                            <div style={{ textAlign: 'left', marginLeft: 60, marginTop: 30 }}>
                                <div style={{ float: 'left' }}>
                                    <span>收入:</span>
                                    <span style={{ color: 'red', marginLeft: 18 }}>USD : &nbsp;&nbsp;{totalFeeData.receiptAmoumtUSD}</span>
                                    <span style={{ color: 'red', marginLeft: 10 }}>CNY : &nbsp;&nbsp;{totalFeeData.receiptAmoumtCNY}</span>
                                    <span style={{ color: 'red', marginLeft: 10 }}>HKD   : &nbsp;&nbsp;{totalFeeData.receiptAmoumtHKD}</span>
                                    <br /><br />
                                    <span>支出:</span>
                                    <span style={{ color: 'red', marginLeft: 18 }}>USD : &nbsp;&nbsp;{totalFeeData.payAmoumtUSD}</span>
                                    <span style={{ color: 'red', marginLeft: 10 }}>CNY : &nbsp;&nbsp;{totalFeeData.payAmoumtCNY}</span>
                                    <span style={{ color: 'red', marginLeft: 10 }}>HKD   : &nbsp;&nbsp;{totalFeeData.payAmoumtHKD}</span>
                                    <br /><br />
                                    <span>毛利润:</span>
                                    <span style={{ color: 'red', marginLeft: 6 }}>USD : &nbsp;&nbsp;{totalFeeData.profitAmoumtUSD}</span>
                                    <span style={{ color: 'red', marginLeft: 10 }}>CNY : &nbsp;&nbsp;{totalFeeData.profitAmoumtCNY}</span>
                                    <span style={{ color: 'red', marginLeft: 10 }}>HKD   : &nbsp;&nbsp;{totalFeeData.profitAmoumtHKD}</span>
                                </div>
                                <div style={{ float: 'left' }}>
                                    <span style={{ marginLeft: 80 }}>人民币合计：</span>
                                    <span style={{ color: 'red' }}> &nbsp;&nbsp;{totalFeeData.receiptTotalCNY}</span>
                                    <br /><br />
                                    <span style={{ marginLeft: 80 }}>人民币合计：</span>
                                    <span style={{ color: 'red' }}> &nbsp;&nbsp;{totalFeeData.payTotalCNY}</span>
                                    <br /><br />
                                    <span style={{ marginLeft: 80 }}>人民币合计： </span>
                                    <span style={{ color: 'red' }}> &nbsp;&nbsp;{totalFeeData.profitTotalCNY}</span>
                                </div>
                            </div>
                        </Row>
                    </TabPane>
                </Tabs>

                <div style={Object.assign({}, { marginTop: 50, borderTop: '1px solid #5993F4', width: '100%' }, divWithOutBorderBottom)}>
                    <Tabs tabPosition={'top'} style={{ width: '99%' }}>
                        <TabPane tab="应收费用" key="1">
                            <div style={{ display: this.props.businessApproval ? 'inline-block' : 'none', width: '100%' }}>
                                <Row>
                                    <span style={{marginLeft: 12, color: 'red', lineHeight: 2}}>{claimTotal}</span>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_FEECHANGE_ADD}>
                                        <Col span={2.5} style={{ float: 'right', marginBottom: 12, display: order.claimAddStatus === '0' && order.chargeStatus === '3' ? 'inline-block' : 'none' }}>
                                            <span>
                                                <Popover content={<div><div><Input maxLength="100" value={this.state.addMemo} onChange={this.changeAddMemo.bind(this)} /></div>
                                                    <div style={{ marginTop: 3 }}>
                                                        <span style={{ float: 'right' }}><Button onClick={this.closeAdd.bind(this)}>取消</Button></span>
                                                        <span style={{ marginLeft: 30 }}><Button onClick={this.confirmAdd.bind(this)}>确认</Button></span>
                                                    </div></div>
                                                }
                                                    title='请输入变更原因' trigger="click" visible={this.state.openAdd && this.state.addType === '1'} onVisibleChange={this.openAdd.bind(this, "1")}>
                                                    <Button icon="file-text" size={'default'}>变更新增</Button>
                                                </Popover>
                                            </span>
                                        </Col>
                                    </RightBox>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_FEEAPPROVAL}>
                                        <Col span={2.5} style={{ float: 'right', marginBottom: 12, display: order.claimAddStatus === '1' ? 'inline-block' : 'none' }}>
                                            <span>
                                                <Popover content={<div><div><Input maxLength="100" value={this.state.addApprovalMemo} onChange={this.changeAddApprovalMemo.bind(this)} /></div>
                                                    <div style={{ marginTop: 3 }}>
                                                        <span style={{ float: 'right' }}><Button onClick={this.closeAddApproval.bind(this)}>取消</Button></span>
                                                        <span style={{ float: 'right' }}><Button onClick={this.confirmAddApproval.bind(this, "0")}>拒绝</Button></span>
                                                        <span style={{ marginLeft: 30 }}><Button onClick={this.confirmAddApproval.bind(this, "1")}>同意</Button></span>
                                                    </div></div>
                                                }
                                                    title='请输入审核备注' trigger="click" visible={this.state.openAddApproval && this.state.addApprovalType === '1'} onVisibleChange={this.openAddApproval.bind(this, "1")}>
                                                    <Button icon="file-text" size={'default'}>变更审核</Button>
                                                </Popover>
                                            </span>
                                        </Col>
                                    </RightBox>

                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_ADD}>
                                        <Col span={4.5} style={{ float: 'right', marginBottom: 12, display: order.chargeStatus === '1' || order.claimAddStatus === '2' ? 'inline-block' : 'none' }}>
                                            <span>
                                                <div>
                                                      <Button icon="plus" size={'default'} onClick={this.handleAddFee.bind(this, null, "1", order.claimAddStatus === '2')}>新增</Button>
                                                      <Button icon="plus" size={'default'} onClick={this.handleAddTemplate.bind(this, null, "1", order.claimAddStatus === '2',true,)}>应收模板</Button>
                                                </div>
                                            </span>
                                        </Col>
                                    </RightBox>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_FEECHANGE_SUBMIT}>
                                        <Col span={3} style={{ float: 'right', marginBottom: 12, display: order.claimAddStatus === '2' ? 'inline-block' : 'none' }}>
                                            <span>
                                                <Popconfirm onConfirm={this.addChargeSumit.bind(this, '1')} okText="是" cancelText="否"
                                                    placement="leftTop" title={'变更提交之后必须重新申请才能再次新增，是否继续提交?'}>
                                                    <Button icon="check" size={'default'}>提交变更</Button>
                                                </Popconfirm>
                                            </span>
                                        </Col>
                                    </RightBox>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_BILL}>
                                        <Col span={3} style={{ float: 'right', marginBottom: 12, marginRight: 10, display: order.chargeStatus === '3' ? 'inline-block' : 'none' }}>
                                            <span><Button icon="file-text" size={'default'} onClick={this.handleGeneratingBill.bind(this, this.props.form.getFieldValue("settlementUnit"))}>生成应收账单</Button></span>
                                        </Col>
                                    </RightBox>
                                    <Col span={6} style={{float: 'right', display: order.chargeStatus === '3' ? 'inline-block' : 'none'}}>
                                        {getFieldDecorator('settlementUnit')(
                                            <Select filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}                                          
                                                    placeholder="可通过关键字搜索结算单位" showSearch
                                                    disabled={false} allowClear
                                            >
                                                {
                                                    !R.isNil(unitList) ? unitList.map(item => {
                                                        return (<Select.Option value={item.settlementUnit}>{item.settlementUnit}</Select.Option>);
                                                    }) : ''
                                                }
                                            </Select>
                                        )}
                                    </Col>
                                </Row>
                            </div>
                            <div style={{ marginLeft: 10 }}>
                                <Table rowKey='id' dataSource={this.props.order.odChargeMap.odReceiptChargeList} columns={this.getReceivableColumns()} bordered={true} size={'small'}
                                    rowSelection={this.props.businessApproval ? receivableRowSelection : null} pagination={false} scroll={{ x: true }}/>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                <div style={divWithOutBorderBottom}>
                    <Tabs tabPosition={'top'} style={{ width: '99%' }}>
                        <TabPane tab="应付费用" key="1">
                            <div style={{ display: this.props.businessApproval ? 'inline-block' : 'none', width: '100%' }}>
                                <Row>
                                <span style={{marginLeft: 12, color: 'red', lineHeight: 2}}>{payTotal}</span>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_COPEWITH_PAYAPPLY}>
                                        <Col span={3} style={{ float: 'right', marginBottom: 12, marginRight: 20 }}>
                                            <span><Button icon="export" size={'default'} onClick={this.handlePayApply.bind(this)}>付款申请</Button></span>
                                        </Col>
                                    </RightBox>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_COPEWITH_FEECHANGE_ADD}>
                                        <Col span={2.5} style={{ float: 'right', marginBottom: 12, display: order.payAddStatus === '0' && order.chargeStatus === '3' ? 'inline-block' : 'none' }}>
                                            <span>
                                                <Popover content={<div><div><Input maxLength="100" value={this.state.addMemo} onChange={this.changeAddMemo.bind(this)} /></div>
                                                    <div style={{ marginTop: 3 }}>
                                                        <span style={{ float: 'right' }}><Button onClick={this.closeAdd.bind(this)}>取消</Button></span>
                                                        <span style={{ marginLeft: 30 }}><Button onClick={this.confirmAdd.bind(this)}>确认</Button></span>
                                                    </div></div>
                                                }
                                                    title='请输入变更原因' trigger="click" visible={this.state.openAdd && this.state.addType === '0'} onVisibleChange={this.openAdd.bind(this, "0")}>
                                                    <Button icon="file-text" size={'default'}>变更新增</Button>
                                                </Popover>
                                            </span>
                                        </Col>
                                    </RightBox>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_RECEIVABLE_FEEAPPROVAL}>
                                        <Col span={2.5} style={{ float: 'right', marginBottom: 12, display: order.payAddStatus === '1' ? 'inline-block' : 'none' }}>
                                            <span>
                                                <Popover content={<div><div><Input maxLength="100" value={this.state.addApprovalMemo} onChange={this.changeAddApprovalMemo.bind(this)} /></div>
                                                    <div style={{ marginTop: 3 }}>
                                                        <span style={{ float: 'right' }}><Button onClick={this.closeAddApproval.bind(this)}>取消</Button></span>
                                                        <span style={{ float: 'right' }}><Button onClick={this.confirmAddApproval.bind(this, "0")}>拒绝</Button></span>
                                                        <span style={{ marginLeft: 30 }}><Button onClick={this.confirmAddApproval.bind(this, "1")}>同意</Button></span>
                                                    </div></div>
                                                }
                                                    title='请输入审核备注' trigger="click" visible={this.state.openAddApproval && this.state.addApprovalType === '0'} onVisibleChange={this.openAddApproval.bind(this, "0")}>
                                                    <Button icon="file-text" size={'default'}>变更审核</Button>
                                                </Popover>
                                            </span>
                                        </Col>
                                    </RightBox>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_COPEWITH_ADD}>
                                        <Col span={4.5} style={{ float: 'right', marginBottom: 12, display: order.chargeStatus === '1' || order.payAddStatus === '2' ? 'inline-block' : 'none' }}>
                                            <span><Button icon="plus" size={'default'} onClick={this.handleAddFee.bind(this, null, "0", order.payAddStatus === '2')}>新增</Button>
                                                  <Button icon="plus" size={'default'} onClick={this.handleAddTemplate.bind(this, null, "0", order.claimAddStatus === '2',true)}>应付模板</Button>
                                            </span>
                                        </Col>
                                    </RightBox>
                                    <RightBox resource={RightConstants.ORDER.ORDER_COST_COPEWITH_FEECHANGE_SUBMIT}>
                                        <Col span={2.5} style={{ float: 'right', marginBottom: 12, display: order.payAddStatus === '2' ? 'inline-block' : 'none' }}>
                                            <span>
                                                <Popconfirm onConfirm={this.addChargeSumit.bind(this, '0')} okText="是" cancelText="否"
                                                    placement="leftTop" title={'变更提交之后必须重新申请才能再次新增，是否继续提交?'}>
                                                    <Button icon="check" size={'default'}>提交变更</Button>
                                                </Popconfirm>
                                            </span>
                                        </Col>
                                    </RightBox>
                                </Row>
                            </div>
                            <div style={{ marginLeft: 10, marginBottom: 15 }}>
                                <Table rowKey='id' dataSource={this.props.order.odChargeMap.odPayChargeList} columns={this.getCopeWithColumns()} bordered={true} size={'small'}
                                    rowSelection={this.props.businessApproval ? copewithRowSelection : null} pagination={false} />
                            </div>
                        </TabPane>
                    </Tabs>
                </div>

                <div style={Object.assign({}, { borderBottom: '1px solid #5993F4', width: '100%' }, divWithOutBorderBottom)}>
                    <Row style={{ marginTop: 30, marginBottom: 20, width: '100%', display: this.props.businessApproval ? 'inline-block' : 'none' }}>
                        <RightBox resource={RightConstants.ORDER.ORDER_COST_FEE_CONFIRM}>
                            <Col span={3} style={{ marginLeft: 415, display: this.props.order.order.chargeStatus == "3" ? 'none' : 'inline-block' }}>
                                <span><Button loading={this.props.loading} type="primary" size={'default'} onClick={this.isConfirmCharge.bind(this, flagContent)}>{this.props.order.order.chargeStatus == "2" ? '取消确认' : '费用确认'}</Button></span>
                            </Col>
                        </RightBox>
                        {/* <Col span={3}>
                                <Button loading={this.props.loading} type="primary" size={'default'} onClick={this.onCalculation.bind(this)}>计算金额</Button>
                            </Col> */}
                    </Row>
                    <Row style={{ marginTop: 30, marginBottom: 20, width: '100%', display: this.props.businessApproval || this.props.businessOrder ? 'none' : 'inline-block' }}>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="审核结果" hasFeedback>
                                {getFieldDecorator('result', {
                                    rules: [{
                                        required: true, message: '请选择审核结果！',
                                    }]
                                })(
                                    <Select>
                                        <Select.Option value="0">审核不通过</Select.Option>
                                        <Select.Option value="1">审核通过</Select.Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="备注" hasFeedback>
                                {getFieldDecorator('memo', {
                                    rules: [{
                                        required: this.props.form.getFieldValue('result') == "0" ? true : false, message: '请输入备注',
                                    }]
                                })(
                                    <Input.TextArea autosize={{ minRows: 2, maxRows: 5 }} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                </div>

                <div style={Object.assign({}, { marginTop: 12, borderTop: '1px solid #5993F4', borderBottom: '1px solid #5993F4', width: '100%' }, divWithOutBorderBottom)}>
                    <Tabs tabPosition={'top'} style={{ width: '99%' }}>
                        <TabPane tab="费用确认历史" key="1">
                            <div style={{ marginLeft: 10, marginTop: 12, marginBottom: 20 }}>
                                <Table rowKey='id' dataSource={this.props.approvalHistory[Constants.BUSINESSTYPE.CHARGECONFIRM + 'List']} columns={this.chargeConfirmColumns} bordered={true} size={'small'} pagination={this.getPagination([Constants.BUSINESSTYPE.CHARGECONFIRM], Constants.BUSINESSTYPE.CHARGECONFIRM)} />
                            </div>
                        </TabPane>
                        <TabPane tab="费用变更(新增申请)历史" key="2">
                            <div style={{ marginLeft: 10, marginTop: 12, marginBottom: 20 }}>
                                <Table rowKey='id' dataSource={this.props.approvalHistory[Constants.BUSINESSTYPE.CHARGE_ADD + 'List']} columns={this.chargeAddColumns} bordered={true} size={'small'} pagination={this.getPagination([Constants.BUSINESSTYPE.CHARGE_ADD_PAY, Constants.BUSINESSTYPE.CHARGE_ADD_CLAIM], Constants.BUSINESSTYPE.CHARGE_ADD)} />
                            </div>
                        </TabPane>
                        <TabPane tab="费用变更历史" key="3">
                            <div style={{ marginLeft: 10, marginTop: 12, marginBottom: 20 }}>
                                <Table rowKey='id' dataSource={this.props.approvalHistory[Constants.BUSINESSTYPE.CHARGE_UPDATE + 'List']} columns={this.chargeUpdateColumns} bordered={true} size={'small'} pagination={this.getPagination([Constants.BUSINESSTYPE.CHARGE_UPDATE_PAY, Constants.BUSINESSTYPE.CHARGE_UPDATE_CLAIM], Constants.BUSINESSTYPE.CHARGE_UPDATE)} />
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                <PaymentDetail wrappedComponentRef={(inst) => this.paymentDetail = inst} orderId={order.id} refreshFees={this.handleSearch} />
                <OrderChargeInfo wrappedComponentRef={(inst) => this.orderChargeInfo = inst} orderId={this.props.orderId} refreshList={this.handleSearch} onCalculation={this.onCalculation} fetchDetail={this.props.fetchDetail} companyName={company.companyName} />
                <AddChargeTemplate wrappedComponentRef={(inst) => this.addChargeTemplate = inst} orderId={this.props.orderId} refreshList={this.handleSearch} onCalculation={this.onCalculation} fetchDetail={this.props.fetchDetail} companyName={company.companyName} />
            </Form >
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.order, order: state.order, deliveryReceipt: state.deliveryReceipt, orderCharge: state.orderCharge, approvalHistory: state.approvalHistory , chargeTemplate: state.chargeTemplate
    };
}

export default connect(mapStateToProps)(orderCostInfo);